import { Component, OnDestroy, OnInit } from "@angular/core";
import { sjgzxinModuledatas } from "../pubcomponent/pageTitle.datas";
import { CommService } from "../comm-service";
import { MyhttpService } from "../myhttp.service";

declare var $: any;

@Component({
  template: `
  <div class="all_bg paddingTop">
    <div class="">
      <div class="portlet-body">
        <div class="row">
          <form class="form-horizontal" role="form">
            <div class="col-lg-5">
              <div class="form-group">
                <label class="col-lg-3 control-label">时间段：</label>
                <div class="col-lg-9">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                    <input type="text" class="form-control datetimepickerB_content" id="s_sbtime"
                           [value]="s_obj.kssj" readonly>
                    <span class="input-group-addon">至</span>
                    <input type="text" class="form-control datetimepickerE_content" id="s_edtime"
                           [value]="s_obj.jssj" readonly>
                    <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3">
              <div class="form-group">
                <label class="col-lg-5 control-label">标签id:</label>
                <div class="col-lg-7">
                  <input type="text" class="form-control" name="sczdid" [(ngModel)]="s_obj.dzbqid"/>
                </div>
              </div>
            </div>
            <div class="col-lg-3">
              <div class="form-group">
                <label class="col-lg-5 control-label">统计方式:</label>
                <div class="col-lg-7">
                  <select class="form-control" name="sjjg" id="sjjgSelect" [(ngModel)]="s_obj.sjjg"></select>
                </div>
              </div>
            </div>
            <div class="col-lg-1">
              <button type="button" class="btn blue" (click)="initTable()">
                <i class="fa fa-search"></i> 搜索
              </button>
            </div>
          </form>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div class="tableRoom">
              <div [style.width]="tablebasewstr">
                <table class="table table-bordered">
                  <thead *ngIf="theadyList.length">
                  <tr>
                    <td *ngFor="let item of theadyList">{{item}}</td>
                  </tr>
                  </thead>
                  <tbody *ngIf="tbodyList.length">
                  <tr *ngFor="let row of tbodyList">
                    <td *ngFor="let cell of row">{{cell}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  `,
  styles: [
    ".tableRoom{width: 100%;overflow-x: auto}"
  ]
})
export class BqsbxTsgjComponent implements OnInit, OnDestroy {
  s_obj: any = {
    kssj: "", //b
    jssj: "", //b
    dzbqid: "",
    sjjg: ""
  };
  theadyList: any[] = [];
  tbodyList: any[] = [];
  tablebasewstr: string = "0px";

  /**
   * 处理搜索表格
   */
  createSearchForm(): void {
    const sjjgList = [{
      code: "s1",
      name: "每秒钟"
    }, {
      code: "s10",
      name: "每10秒钟"
    }, {
      code: "m1",
      name: "每分钟"
    }, {
      code: "m10",
      name: "每10分钟"
    }];
    $("#sjjgSelect").empty();
    let str: string = "<option value=''>--请选择--</option>";
    sjjgList.forEach((item) => {
      str += "<option value='" + item.code + "'>" + item.name + "</option>";
    });
    $("#sjjgSelect").append(str);
    $("#sjjgSelect").selectpicker({
      size: 5
    });
    this.s_obj.sjjg = "";
    $('.datetimepickerB_content').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 结束时间不能小于开始时间,
      $(".datetimepickerE_content").datetimepicker("setStartDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    $('.datetimepickerE_content').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 开始时间不能大于结束时间
      $(".datetimepickerB_content").datetimepicker("setEndDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    const initBdate = this.commservice.YMDHMS_get(Date.now() - 8 * 60 * 60 * 1000);
    const initEdate = this.commservice.YMDHMS_get(false);
    this.s_obj.kssj = initBdate;
    this.s_obj.jssj = initEdate;
  }

  initTable(): void {
    this.s_obj.kssj = $("#s_sbtime").val() ? $("#s_sbtime").val() : this.s_obj.kssj;
    this.s_obj.jssj = $("#s_edtime").val() ? $("#s_edtime").val() : this.s_obj.jssj;
    if (!this.s_obj.kssj || !this.s_obj.jssj) {
      return
    }

    const url = "sjgz/tszsgj/hqBqSbTjxx";
    this.itservice.kwPtPost(url, this.s_obj).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const tsDzbqSbxxLbHeader = resp.tsDzbqSbxxLbHeader;
            const tsDzbqSbxxLbBody = resp.tsDzbqSbxxLbBody;
            if (tsDzbqSbxxLbHeader && tsDzbqSbxxLbHeader.length) {
              this.theadyList = tsDzbqSbxxLbHeader;
              this.tablebasewstr = `${this.theadyList.length * 150}px`;
            }
            if (tsDzbqSbxxLbBody && tsDzbqSbxxLbBody.length) {
              this.tbodyList = tsDzbqSbxxLbBody;
            }
          } else {
            this.commservice.myswal("warning", resp, "", "ts", null);
          }
        } else {
          this.initTable();
        }
      });
    })

  }

  constructor(private commservice: CommService,
    private itservice: MyhttpService) {

  }

  ngOnInit() {
    this.createSearchForm();
    this.initTable();
  }

  ngOnDestroy() {

  }

}
